<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/10/1
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<html>
<head>
    <title>Title</title>
    <link rel="shortcut icon" href="<%=basePath%>/static/img/favicon.ico" type="image/x-icon">
    <script src="<%=basePath %>/static/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/static/css/basic.css">
    <script src="<%=basePath %>/static/js/bootstrap.min.js"></script>
    <script>
        function check() {
            let $loginFm = $("#login-form");

            let $readerId = $("#readerId").val();
            let $password = $("#password").val();

            console.log($readerId);
            console.log($password);

            $readerId.html = "";
            $password.html = "";

            if ($readerId == null || $readerId.length === 0) {
                $("#user-msg").html("请输入卡号").addClass("alert-error").fadeIn(500);
                return false;
            } else if ($password == null || $password.length === 0) {
                $("#password-msg").html("请输入密码").addClass("alert-error").fadeIn(500);
                return false;
            } else {
                $loginFm.submit()
            }
        }
    </script>
    <script>
    </script>
    <style>
        body {
            background: url("https://timgsa.baidu.com/timg?image&quality=100&size=b9999_10000&sec=1538415112324&di=d1d4507bf5c79bb101fc81eda53ee96a&imgtype=0&src=http%3A%2F%2Fi6.qhimg.com%2Ft01ba7be33f536b37f5.jpg") no-repeat;
            background-size: cover;
            width: 100%;
            height: 100%;
        }
        
        .wrap {
            margin: 5% auto;
            height: 700px;
            border-radius: 9px;
            z-index: 8;
        }
        
        .left-content {
            height: 700px;
            opacity: 0.30;
            background-color: #222222;
        }
        
        .right-content {
            margin: auto;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .form-div {
            z-index: 100;
            margin: 30% auto;
            width: 80%;
            padding: 5% 10%;
            /*#888596*/
            background-color: rgba(256, 256, 240, 1);
            border-radius: 7px;
            /*background-color: darkgray;*/
        }
        
        .lg-form {
            max-width: 300px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="wrap col-md-12">
            <div class="row">
                <div class="col-md-7 left-content">
                </div>
                <div class="col-md-5 right-content">
                    <div class="form-div">
                        <h1>登录</h1>
                        <hr>
                        <div id="" class="lg-form">
                            <form action="<%=basePath%>/login" method="post" target="_self"
                                  id="login-form">
                                <div class="form-group">
                                    <label>校园卡卡号</label>
                                    <input type="text" id="readerId" name="readerId"
                                           class="form-control" placeholder="校园卡卡号">
                                    <span id="user-msg"></span>
                                </div>
                                <div class="form-group">
                                    <label>密码</label>
                                    <input type="password" id="password" name="password"
                                           class="form-control" placeholder="请输入密码">
                                    <span id="password-msg"></span>
                                </div>
                                <div class="form-group">
                                    <input type="button" id="login-btn"
                                           class="btn bg-success btn-primary" value="登录"
                                           onclick="return check()" />
                                    <a href="<%=basePath%>/visit" target="_self"
                                       class="btn bg-success right ">访客登录</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>